<div class="sidebar" @slideRight *ngIf="modal.visible">


	<app-header [back]="true">
		<div header-back (click)="modal.onClose()">
			<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
				stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
				class="ai ai-ArrowLeft">
				<path d="M11 5l-7 7 7 7" />
				<path d="M4 12h16" />
			</svg>
		</div>
		<div header-title>

			<input #searchInput (keyup)="onSearch($event)" [(ngModel)]="search" autocomplete="off" class="input"
				type="text" placeholder="Search Music" />
		</div>

	</app-header>

	<div appLoader [loading]="loading" class="sidebar-content no-padding">

		<div class="results">

			<ng-container *ngIf="result.artists.length > 0">

				<h3>Artists</h3>
				<div appDragScroll class="artists">
					<ng-container *ngFor="let artist of result.artists; ">
						<div (click)="onArtist(artist._id)" class="artist">
							<img class="lazyload" [lazyLoad]="artist.picture || '/assets/app-icon-text.png'" />
							<div class="column-details">
								<div class="title">{{ artist.name }}</div>
							</div>
						</div>
					</ng-container>
				</div>



			</ng-container>

			<ng-container *ngIf="result.albums.length > 0">

				<h3>Albums</h3>
				<div appDragScroll class="albums">

					<ng-container *ngFor="let album of result.albums; ">
						<div (click)="onAlbum(album._id)" class="album">
							<img class="lazyload" [lazyLoad]="album.picture || '/assets/app-icon-text.png'" />
							<div class="column-details">
								<div class="title">{{ album.name }}</div>
								<div class="subtitle">{{ album.artist.name }}</div>
							</div>
						</div>
					</ng-container>

				</div>
			</ng-container>


			<ng-container *ngIf="result.tracks.length > 0">


				<div class="title-action">
					<h3>Tracks</h3>

					<div class="float-right">


						<div (click)="onPlayTracks()" class="play-button">
							Play</div>
					</div>
				</div>

				<div class="tracks">
					<div class="track" *ngFor="let track of result.tracks">
						<app-track-item [track]="track"></app-track-item>
					</div>
				</div>

			</ng-container>

		</div>
	</div>
</div>